<template>
  <van-popup
    v-model:show="showBottom"
    position="bottom"
    round
  >
    <div class="flex flex-col h-full justify-between">
      <div class="text-center py-4 font-bold">新建客户</div>
      <div class="flex-auto overflow-y-auto pb-8 px-4">
        <div v-if="list.length" class="flex flex-row items-center py-4">
          客户类型
          <div class="bg-red-500 w-1 h-1 rounded-full ml-1"></div>
        </div>
        <template v-if="list.length" v-for="item of list">

          <div class="flex flex-row items-center mb-4" @click="onSelectBox(item)">
            <img
              v-if="selected(item)"
              src="../../icons/svg/orderVisit/checked_icon.svg"
              alt="选中"
            />
            <img
              v-else
              src="../../icons/svg/orderVisit/uncheck_icon.svg"
              alt="未选"
            />
            <div class="ml-2">{{item.name || ''}}</div>
          </div>
        </template>
        <empty-view v-else des="暂无客户类型"></empty-view>
      </div>

      <div class="px-4 py-4 ">
        <van-button size="large" :disabled="!currentItem" round color="#436BFF" @click="onConfirm"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineProps, defineExpose, defineEmits } from "vue";
import { showToast } from "vant";
import EmptyInfo from "@/views/interviewBot/components/Evaluate/EmptyInfo.vue";
import EmptyView from "@/components/emptyView.vue";

const props = defineProps({
  list: {
    type: Array
  }
});

const emits = defineEmits(["confirm"]);

const selected = (v) => {
  if (!currentItem.value) return false;
  return currentItem.value.id === v.id;
};
const currentItem = ref();

function onSelectBox(item) {
  currentItem.value = item;
}

function onConfirm() {
  emits("confirm", currentItem.value);
  hidden();
}

// 控制显示隐藏相关
const showBottom = ref(false);

function show() {
  showBottom.value = true;
}

function hidden() {
  showBottom.value = false;
}

defineExpose({
  show,
  hidden
});
</script>

<style scoped lang="less"></style>
